<template>
	<view class="create-ad">
		<view class="form-item">
			<text class="form-item-title">姓名</text>
			<input v-model="createForm.name" class="uni-input" placeholder="请输入您的姓名" />
		</view>
		<view class="form-item">
			<text class="form-item-title">电话</text>
			<input v-model="createForm.phone" class="uni-input" placeholder="请输入您的电话" />
		</view>
		<view class="form-item">
			<text class="form-item-title">地址</text>
			<input :disabled="true" class="uni-input" :placeholder="defaultAddress" @click="handleOpenSel" />
			<LbPicker ref="picker" v-model="createForm.address" :list="listCityData" :level="3" class="picker" mode="multiSelector" confirm-color="#3B73FF" @confirm="handleConfirm" />
		</view>
		<view class="form-item">
			<text class="form-item-title">详细地址</text>
			<textarea v-model="createForm.details" :auto-height="true" style="max-height: 140rpx" class="text-area" placeholder="街道门牌信息" />
		</view>
		<view class="btn-row">
			<button class="btn-primary block" @click="handleSave">保存地址</button>
		</view>
	</view>
</template>

<script>
import LbPicker from '@/components/lb-picker/index.vue';
import cityData from '@/utils/city.js';
export default {
	components: {
		LbPicker
	},
	data() {
		return {
			id: '',
			listCityData: cityData,
			createForm: {
				name: '',
				phone: '',
				address: [],
				details: '',
				addressTexts: []
			},
			defaultAddress: '请选择您的地址'
		};
	},
	onLoad(options) {
		if('id' in options) {
			this.id = options.id
			uni.setNavigationBarTitle({
				title: '编辑地址'
			})
			this.getAddressDetails(options.id)
		}
	},
	methods: {
		// 查询地址信息
		getAddressDetails(id) {
			this.$request.address.queryAddressDetails({id}).then(res =>{
				if(res.status === 200) {
					const province = res.data.province
					const city = res.data.city
					const district = res.data.district
					this.createForm.name = res.data.name
					this.createForm.phone = res.data.phone
					this.createForm.details = res.data.address
					this.createForm.address = [res.data.provinceCode, res.data.cityCode, res.data.districtCode]
					this.createForm.addressTexts = [province, city, district]
					this.defaultAddress = `${province}-${city}-${district}`
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}).catch(() => {
				uni.showToast({
					title: '服务器出错了',
					icon: 'none'
				})
			})
		},
		// 打开地址选择
		handleOpenSel() {
			this.$refs.picker.show()
		},
		// 保存地址
		handleSave() {
			if(!this.createForm.name) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				})
				return
			} else if(!this.createForm.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			} else if(!this.createForm.address.length) {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				})
				return
			} else if(!this.createForm.details) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				return
			}
			uni.showLoading()
			const params = {
				id: this.id,
				name: this.createForm.name,
				phone: this.createForm.phone,
				province: this.createForm.addressTexts[0],
				provinceCode:this.createForm.address[0],
				city: this.createForm.addressTexts[1],
				cityCode: this.createForm.address[1],
				district: this.createForm.addressTexts[2],
				districtCode: this.createForm.address[2],
				address: this.createForm.details
			}
			// 保存地址
			this.id ? this.handleUpdateAddress(params) : this.handleCreateAddress(params)
		},
		handleCreateAddress(params) {
			this.$request.address.createAddress(params).then(res => {
				uni.hideLoading()
				if(res.status === 200) {
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						success() {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}).catch(() =>{
				uni.hideLoading()
			})
		},
		handleUpdateAddress(params) {
			this.$request.address.updateAddress(params).then(res => {
				uni.hideLoading()
				if(res.status === 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						success() {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}).catch(() =>{
				uni.hideLoading()
			})
		},
		// 确认后获取文本
		handleConfirm(e) {
			this.defaultAddress = e.item.map(item => item.label).join('-')
			this.createForm.addressTexts = e.item.map(item => item.label)
		}
	}
};
</script>

<style lang="scss">
.create-ad {
	min-height: 100vh;
	background: $white;
	.form-item {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid $uni-border-color;
		padding: 20rpx;
		&:nth-of-type(4) {
			align-items: start;
			.form-item-title {
				width: 140rpx;
			}
		}
		.form-item-title {
			width: 72rpx;
		}
	}
	.btn-row {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 40rpx;
		box-sizing: border-box;
	}
}
</style>
<style lang="scss">
.create-ad {
	.uni-input,
	.picker,
	.text-area {
		flex: 1;
		width: 100%;
		min-width: 0;
		border: 0 none;
		color: $uni-text-color-placeholder;
	}
}
</style>
